<template>
	<view class="main" v-for="item in imglist" :key="item._id">
		<img :src="item.url" alt="" class="img" @click="messageToggle(item.url)" />
	</view>
	
	<uni-popup type="bottom" ref="prop">
		<view class="cons">
			<image mode="widthFix" :src="path" class="image"/>
			<ksp-cropper mode="free" :width="200" :height="140" :maxWidth="1024" :maxHeight="1024" :url="url"
				@cancel="oncancel" @ok="onok"></ksp-cropper>
		</view>
		<view class="tan">
			<button class="qu" @click="qu">取消</button>
			<button class="xuan" @click="select">选图</button>
			<button class="xia" @click="xia">下载</button>
		</view>
	</uni-popup>
</template>

<script setup>
	import message from '@tencentcloud/chat-uikit-uniapp/locales/en/message';
	import {
		onMounted,
		ref
	} from 'vue';

	let imglist = ref([
		{url:'https://ts1.cn.mm.bing.net/th?id=OIP-C.wNQuklf3qBp0cXCDARWgdwHaLI&w=203&h=306&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'},
		{url:'https://ts4.cn.mm.bing.net/th?id=OIP-C.7zNQQXkoUUMMihMq6YHhywHaLG&w=204&h=306&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'},
		{url:'https://ts4.cn.mm.bing.net/th?id=OIP-C.Y3b0_zliAdh2NzCa3F3eawHaLH&w=204&h=306&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'},
		{url:'https://ts1.cn.mm.bing.net/th?id=OIP-C.NF1mNnGb_Wjx8kjse2HpXAHaL2&w=197&h=316&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'},
		{url:'https://tse4-mm.cn.bing.net/th/id/OIP-C.i2GbH8xBefAlICDo6tzizQHaKn?w=186&h=267&c=7&r=0&o=5&dpr=1.3&pid=1.7'},
	])
	let image = ref('')
	let prop = ref(null)
	let url = ref('')
	let path = ref('')

	let xia = () => {
		uni.downloadFile({
			url: path.value,
			success: downloadResult => {
				if (downloadResult.statusCode === 200) {
					saveToAlbum(downloadResult.tempFilePath);
				} else {
					showToast('图片下载失败');
				}
			},
			fail: () => {
				showToast('图片下载失败');
			}
		});
		prop.value.close()
	}
	
	const saveToAlbum = (tempFilePath) => {
		uni.saveImageToPhotosAlbum({
			filePath: tempFilePath,
			success: () => {
				showToast('图片保存成功');
			},
			fail: () => {
				showToast('图片保存失败');
			}
		});
	};
	
	const showToast = (title) => {
		uni.showToast({
			title: title,
			icon: 'none'
		});
	};

	let getimg = () => {
		uni.request({
			url: 'http://localhost:3000/app/getimg',
			success: ({
				data
			}) => {
				imglist.value = data.imgs
			}
		})

	}

	onMounted(() => {
		// getimg()
	})

	let messageToggle = (type) => {
		prop.value.open()
		image.value = type
		path.value = type
	}
	
	let qu = (key)=>{
		prop.value.close()
	}
	let select = ()=>{
		url.value = image.value
	}
	
	let onok = (ev) => {
		url.value = "";
		path.value = ev.path;
	}
	
	let oncancel = () => {
		// url设置为空，隐藏控件
		url.value = "";
	}
	
</script>

<style lang="less" scoped>
	.main {
		width: 43%;
		padding: 10rpx 10rpx;
		margin: 16rpx;
		float: left;

		.img {
			width: 100%;
		}
	}
	.tan{
		width: 90%;
		margin: 20px auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 5%;
		
		.qu{
			width: 34%;
			height: 80rpx;
			font-size: 15px;
		}
		.xuan{
			width: 34%;
			height: 80rpx;
			font-size: 15px;
		}
		.xia{
			width: 34%;
			height: 80rpx;
			font-size: 15px;
		}
	}
	.cons{
		width: 90%;
		height: 100vh;
		
		.image{
			width: 90%;
			height: 80vh;
			margin-top: 100px;
			margin-left: 30px;
		}
	}
</style>